<template>
	<div>
		<div v-loading="loading" class="vs-table-box" style="padding: 20px 100px">
			<div class="tit">顾客信息</div>
			<div class="searchInfo" style="width: 400px">
				<el-form ref="form" :inline="true" :model="form" label-width="120px">
					<el-input placeholder="请输入姓名、手机号或会员卡号" v-model="keys">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
						<template slot="append">
							<div @click="getUserSearch" class="inquire">
								<i v-show="isBtn" class="el-icon-loading"></i>
								查询
							</div>
						</template>
					</el-input>
				</el-form>
			</div>
			<!-- 查询完进行回现  -->
			<el-descriptions border :column="3" style="margin-top: 20px">
				<el-descriptions-item label="会员卡号">{{ userMsg.vip_no }}</el-descriptions-item>
				<el-descriptions-item label="姓名">{{ userMsg.realname }}</el-descriptions-item>
				<el-descriptions-item label="性别">{{ userMsg.gender | typeGender }}</el-descriptions-item>
				<el-descriptions-item label="手机号">{{ userMsg.phone }}</el-descriptions-item>
				<el-descriptions-item label="积分">{{ userMsg.integral }}</el-descriptions-item>
			</el-descriptions>
			<div class="selfTime">
				<span>自提时间</span>
				<el-date-picker v-model="form.self_time" type="datetime" placeholder="请选择" value-format="yyyy-MM-dd hh:mm:ss"> </el-date-picker>
			</div>
			<div class="tit">商品信息</div>
			<div class="order_info">
				<div class="order_info_top">
					<div class="img">
						<el-image style="width: 100%; height: 100%" fit="cover" :src="integral.images" :preview-src-list="[integral.images]"> </el-image>
					</div>
					<div class="order_info_top_right">
						<div>商品系列 ： {{ integral.title }}</div>
						<div>花费积分 ： {{ integral.integral }}</div>
						<div v-if="integral.goods">
							<el-input-number v-model="form.number" @change="handleChange" :min="1" :max="integral.goods.stock"></el-input-number>
						</div>
					</div>
				</div>
			</div>
			<!-- 后端不要了 -->
			<!-- <div class="tit">
            选择门店
        </div>
        <div style="padding-left:40px">
            自提门店：
            <el-select style="width:200px" filterable clearable v-model="form.keys" placeholder="请选择">
                <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"> </el-option>
            </el-select>
        </div> -->
			<div class="vs-bottom-btns">
				<el-button @click="utils.backPage()">返回</el-button>
				<el-button :loading="isBtn2" type="primary" @click="subitm">提交</el-button>
			</div>
		</div>
		<vs-select-user v-model="dialogVisible3" @affirm="affirmUser" :data="vipUserList"></vs-select-user>
	</div>
</template>

<script>
	import VsSelectUser from '@/components/VsSelectUser.vue';
	export default {
		components: { VsSelectUser },
		data() {
			return {
				keys: '',
				tableData: [{}],
				dialogVisible: false,
				isBtn: false,
				isBtn2: false,
				orderType: 1, //1.待收货  2.待领取  3.已完成
				num: 1,
				loading: false,
				userMsg: {},
				form: {
					user_id: '',
					goods_integral_id: '',
					number: '',
					self_time: '',
				},
				storeList: [],
				integral: {},
				vipUserList: [],
				dialogVisible3: false,
			};
		},
		created() {
			let { id, type } = this.$route.query;
			if (id) {
				this.form.goods_integral_id = id;
				this.getIntegralGoods(id);
				this.goodsIntegralgetStore();
			}
		},
		methods: {
			affirmUser(data) {
				this.userMsg = data;
				this.form.user_id = data.id;
			},
			async getUserSearch() {
				if (this.isBtn) return;
				let keys = this.keys.trim();
				if (!keys) return this.$message.error('请输入要搜索的会员卡号/手机号');
				this.isBtn = true;
				let { code, data } = await this.$Http.getUserSearch({ keys });
				this.isBtn = false;
				if (code && data) {
					this.dialogVisible3 = true;
					this.vipUserList = data;
					console.log(data);
				} else this.$message.warning('没有查询到相关的用户信息');
			},
			async getIntegralGoods(id) {
				this.loading = true;
				let { code, data } = await this.$Http.getIntegralGoods({ id });
				this.loading = false;
				if (code) {
					this.integral = data;
				}
			},
			async goodsIntegralgetStore() {
				let { code, data } = await this.$Http.goodsIntegralgetStore();
				if (code) {
					this.storeList = data;
				}
			},
			handleChange() {},
			async subitm() {
				console.log(this.form, '7777');
				if (!this.form.user_id) return this.$message.error('请选择兑换的会员!');
				if (!this.form.self_time) return this.$message.error('请选择自提时间!');
				this.isBtn2 = true;
				console.log(this.form, '999');
				let { code, data } = await this.$Http.goodsIntegralCreateOrders(this.form);
				this.isBtn2 = false;
				if (code) {
					this.$message.success('兑换成功!');
					this.utils.backPage();
				}
			},
			dialogBeforeClose() {
				this.dialogVisible = false;
			},
		},
	};
</script>

<style>
	.disabled .el-upload--picture-card {
		display: none !important;
	}
	.el-descriptions-item__content {
		min-width: 120px;
	}
	.el-input-group__append {
		padding: 0;
	}
</style>
<style lang="scss" scoped>
	.inquire {
		cursor: pointer;
		line-height: 37px;
		width: 60px;
		text-align: center;
	}
	.orderStatus {
		padding: 40px 40px;
		display: flex;
		align-items: center;

		.left_order_status {
			display: flex;
			align-items: center;

			> span {
				margin-left: 30px;
				font-size: 22px;
				color: red;
			}
		}

		.right_money {
			margin-left: auto;
			display: flex;
			align-items: center;

			> div {
				display: flex;
			}

			> div:first-child {
				margin-right: 40px;
				color: red;
			}
		}
	}

	.tit {
		margin: 20px 0;
		font-size: 16px;
		font-weight: 700;
	}

	.money {
		display: flex;
		flex-direction: column;

		> div {
			padding: 0 40px;
			margin-top: 10px;
			text-align: right;
		}
	}

	.dialog_tit {
		padding-bottom: 10px;
		border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
	}

	.order_info {
		display: flex;
		flex-direction: column;
		padding: 20px 40px;

		.order_info_top {
			display: flex;

			.img {
				height: 150px;
				width: 300px;
				background-color: rgba($color: #000000, $alpha: 0.2);
			}

			.order_info_top_right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20px;
				padding: 15px 0;
				font-size: 14px;
				color: rgba($color: #000000, $alpha: 0.7);
			}
		}

		.order_info_bottom {
			margin-top: 40px;
			display: flex;
			flex-direction: column;
			line-height: 30px;
			font-size: 14px;
			color: rgba($color: #000000, $alpha: 0.7);
		}
	}
	.selfTime {
		margin-top: 30px;
		span {
			margin-right: 20px;
		}
	}
</style>
